const code1 =
    `
    router.beforeEach((to, from) => {
        // ...
        
        to.meta?document.getElementsByTagName("title")[0].innerHTML = \`\${to.meta.name} | Learn Vue3\`:null;
        console.log('beforeEach...')
        console.log('to:',to)
        // 返回 false 以取消导航
        // return false
    })
`
const text1 =
    `
·   导航被触发。
·   在失活的组件里调用 beforeRouteLeave 守卫。
·   调用全局的 beforeEach 守卫。
·   在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
·   在路由配置里调用 beforeEnter。
·   解析异步路由组件。
·   在被激活的组件里调用 beforeRouteEnter。
·   调用全局的 beforeResolve 守卫(2.5+)。
·   导航被确认。
·   调用全局的 afterEach 钩子。
·   触发 DOM 更新。
·   调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
`
const text2 =
    `
在这个页面尝试使用了vue router中的几个路由守卫
首先，我们用全局前置路由守卫实现页面title随路由变化而变化

`
const text3 =
    `
然后我们验证了路由守卫的执行流程
值得注意的地方是，组件中的beforeRouteEnter路由守卫确实在全局解析路由守卫beforeResolve前被调用，但在beforeRouteEnter中如果需要使用
this的话，需要在next回调函数中使用，回调执行的顺序在aferEach之后
快打开控制台看看结果吧~
`
const code2 =
    `
    beforeRouteEnter (to, from, next) {
        console.log('beforeRouteEnter...')
        next(vm => {
            // 通过 vm 访问组件实例
            console.log('beforeRouteEnter next callback',vm)
        })
    },
    beforeRouteUpdate (to, from) {
        // just use “this”
        console.log('beforeRouteUpdate...')
    },
    beforeRouteLeave (to, from) {
        console.log('beforeRouteLeave...')
        const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
        if (!answer) return false
    }
`

export { code1,code2, text1, text2,text3 }